<template>
	<view>
		<view class="wrap-video" @click="showTop">
			<view class="teacher-video" v-show="isShow">
				<view style="position: relative;" :style="{height:'100%',width:'100%'}" v-for="item in videoIdList" :key="item" v-if="item==teach_id" :id="`remote_video_`+item">
					<view class="teach-name u-line-1">{{item | fillname(save_room_msg)}}</view>
				</view>
			</view>
			<view class="teacher-video bg_img" v-show="!isShow"></view>
			<view class="student-wrap">
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="student-item" :class="[openCamera==true?'':'hidden']" id="local_stream">
						<view class="student-name u-line-1">{{my_name}}</view>
					</view>
					<view class="student-item bgClass" :class="[openCamera==true?'hidden':'']">
						<view class="student-name u-line-1">{{my_name}}</view>
					</view>
					<view class="student-item" v-for="item in videoIdList" :key="item" v-if="item!==teach_id" :id="`remote_video_`+item">
						<view class="student-name u-line-1">{{item | fillname(save_room_msg)}}</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				
			}
		},
		props:{
			videoIdList:{
				type:Array
			},
			openCamera:{
				type:Boolean,
				default:true
			},
			teach_id:{
				type:[String,Number]
			},
			isShow:{
				type:Boolean,
			},
			my_name:{
				type:String
			},
			save_room_msg:{
				type:Array,
				default:{
					return:[]
				}
			}
		},
		filters:{
			fillname(val,msg){
				var name = '学生'
				msg.forEach((el,key)=>{
					if(val==el.uid) name = el.userName
				})
				return name
			}
		},
		
		methods:{
			showTop(){
				this.$emit('showMeth','block')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hidden{
		display: none;
	}
	.wrap-video{
		height: 382rpx;
		width: 100%;
		display: flex;
		.teacher-video{
			height: 100%;
			width: 70%;
			.teach-name{
				position: absolute;
				font-size: 22rpx;
				color: #FFFFFF;
				bottom: 0;
				height: 32rpx;
				line-height: 32rpx;
				text-indent: 15rpx;
				width: 100%;
				background: rgba(0, 0, 0,1);
				z-index: 10;
				opacity: 0.4;
			}
		}
		.bg_img{
			background-image: url(../../../static/images/course/cam_off.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
		.student-wrap{
			height: 100%;
			width: 30%;
			.scroll-Y{
				height: 100%;
				width: 100%;
				.bgClass{
					background-image: url(../../../static/images/course/cam_off.png);
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}
				.student-item{
					height: 128rpx;
					width: 100%;
					position: relative;
					.student-name{
						position: absolute;
						font-size: 22rpx;
						color: #FFFFFF;
						bottom: 0;
						height: 32rpx;
						line-height: 32rpx;
						text-indent: 15rpx;
						width: 100%;
						background: rgba(0, 0, 0,1);
						z-index: 10;
						opacity: 0.4;
					}
				}
			}
		}
	}
</style>
